<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
	<style>
		.fa-calendar{
			position: absolute;
			left: 8px;
			top: 4px;
		}
		.hour-input {
			width: 160px;
			padding-left: 28px !important;
		}
		.outer-time-picker {
			position:relative;
		}
		.btn-search-time {
			position: relative;
			top: 1px;
			right: 4px;
			outline:none;
			height:34px;
			width:44px;
			border:1px solid #669FC7;
			background-color:#669FC7;
			border:0;
		}
	</style>
	<div class="page-header">
		<h1>日志管理</h1>
	</div>
	<div class="col-xs-12 content-filter">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main" style="padding-top:15px;">
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">关键字&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box">
						<div class="div-search">
							<input style="float:left;height:30px;width:200px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;
							-moz-border-radius:10px 0 0 10px;" type="text" name="keyword" placeholder="搜索名称或日志详情..." autocomplete="off">
							<span id="empty-search" style="position:relative;right:110px;cursor:pointer;display:none;">×</span>
							<button id="btn-search" class="btn-search btn-info" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;margin-right:40px;">
								<i class="ace-icon fa fa-search nav-search-icon white"></i>
							</button>
						</div>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">用户类型</label>
					<div class="keyword-search-box" id="div-user-type">
						<a href="javascript:;" class="keyword-search-keyword active" data-value="0">全部</a>
							<a href="javascript:;" class="keyword-search-keyword" data-value="<?= USER_TYPE_SUPER_ADMIN ?>">超管</a>
							<a href="javascript:;" class="keyword-search-keyword" data-value="<?= USER_TYPE_SCHOOL ?>">学校管理员</a>
							<a href="javascript:;" class="keyword-search-keyword" data-value="<?= USER_TYPE_TEACHER ?>">教师</a>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">操作类型</label>
					<div class="keyword-search-box" id="div-action-type">
						<a href="javascript:;" class="keyword-search-keyword active" data-value="0">全部</a>
						<?php foreach($actionTypeList as $actionType): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-value="<?= $actionType['value'] ?>"><?= $actionType['title'] ?></a>
						<?php endforeach ?>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
                        <label class="keyword-search-label" style="padding-top:5px;">创建时间&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div class="">
							<span class="outer-time-picker">
								<input class="hour-input hour-input-begin" type="text" name="begin_time" value="<?= date('Y-m-d', strtotime('-7 day')) . ' 00:00' ?>" />
								<i class="fa fa-calendar"></i>
							</span>

								&nbsp;&nbsp;-&nbsp;&nbsp;

							<span class="outer-time-picker">
								<input class="hour-input hour-input-end" type="text" name="end_time" value="<?= date('Y-m-d') . ' 23:59' ?>" />
								<i class="fa fa-calendar"></i>
							</span>

							<button class="btn-search-time">
								<i class="ace-icon fa fa-search nav-search-icon white"></i>
							</button>
                        </div>
					</div>	
				</div>	
			</div>
		</div>
	</div>
	<!-- 学校表格 -->
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>用户名称</th>
				<th>用户类型</th>
				<th>操作类型</th>
				<th>日志详情</th>
				<th>ip地址</th>
				<th>创建时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<div id="myModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					批量更新选中的教师角色
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="image-form">
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">所属角色：</label>
								<div class="col-sm-6">
								<div class="col-sm-12 tree">
									<ul id="role-tree"></ul>
								</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="update-role">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 使用新的datetimepicker.js和css，解决设置不了pickerPosition -->
<link rel="stylesheet" href="<?=$staticAdminUrl?>assets/css/bootstrap-datetimepicker-new.min.css" />
<script src="<?=$staticAdminUrl?>assets/js/bootstrap-datetimepicker-new.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('setting/get_log_list')?>',
			"columns": [
	            {"data": "realname"},
	            {"data": "user_type"},
				{"data": "action_type"},
				{"data": "content"},
				{"data": "ip"},
	            {"data": "createtime"},
			]
		});
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			search(table);
		});
		// 敲回车就搜索
		$("[name=keyword]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=keyword]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=keyword]").val('');
					$(this).hide();
					search(table);
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			var keyword = $("[name=keyword]").val();
			search(table);
		});
		$.fn.datetimepicker.dates['zh'] = {
		　　days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
		　　daysShort: ["日", "一", "二", "三", "四", "五", "六","日"],
		　　daysMin: ["日", "一", "二", "三", "四", "五", "六","日"],
		　　months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
		　　monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
		　　meridiem: ["上午", "下午"],
		　　today: "今天"
		};
		// 初始化时间选择器
		$(".hour-input").datetimepicker({
			format: 'yyyy-mm-dd hh:ii',
			language: 'zh-CN',
			todayHighlight: true,
			autoclose: true,
			minuteStep: 1,
			maxDate: "<?= date('Y-m-d') ?>",
		});
		// 搜索时间
		$(".btn-search-time").click(function() {
			var beginTime = $(".hour-input-begin").val();
			var endTime = $(".hour-input-end").val();
			if(beginTime != '' && endTime != '' && beginTime > endTime) {
				tips_alert("开始时间不能小于结束时间", false, function() {
				});
				$(".hour-input-begin").val('');
				return;
			}
			search(table);
		});
	})

	function search(table) {
		var beginTime = $(".hour-input-begin").val();
		var endTime = $(".hour-input-end").val();
		if(beginTime != "" && endTime != "" && beginTime > endTime) {
			beginTime = '';
			endTime = '';
		}
		table.setAjaxData({
			"keyword": $("[name=keyword]").val(),
			"user_type": $("#div-user-type .active").data("value"),
			"action_type": $("#div-action-type .active").data("value"),
			"begintime": beginTime,
			"endtime": endTime
		});
	}
</script>